<template>
	<view>
		<empty text="暂无可用优惠券" v-if="list.length == 0"></empty>
		<view :class="[item.be_status==1?'list':'list1','mlr-36 radius-10 mb-30']" v-for="(item,i) in list" :key="i">
			<view :class="[item.be_status==1?'list-top':'list-top1','flex ptb-35 plr-25']" style="border-bottom:1rpx dashed #d8d8d8;">
				<view class="">
					<view class="yellow bold">
						{{item.coupon_name}}
					</view>
					<view class="size-26 gray-2 mt-10">
						{{item.expiration}} 前可用
					</view>
				</view>
				<view class="red">
					<text class="size-26">￥</text>
					<text class="size-40 bold">{{item.coupon_price}}</text>
				</view>
			</view>
			<view :class="[item.be_status==1?'list-bottom':'list-bottom1','flex plr-20 ptb-35']">
				<view class="">
					满{{item.limit_price}}可用
				</view>
				<view @click="toUse(item)" :class="[item.be_status==1?'bg-yellow':'bg-gray-2','bold ptb-9 plr-20 radius-10 white']">
					{{item.be_status==1?'去使用':'暂不可用'}}
				</view>
			</view>
		</view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				isActice:true,
				list:[]
			};
		},
		onLoad(option) {
			this.goods_id = option.goods_id
			this.num = option.num
			this.init()
		},
		methods:{
			init(){
				this.$http('/api/user/coupon',{
					type:1,
					product_id:this.goods_id,
					num:this.num
				}).then(data=>{
					this.list = data
				})
			},
			toUse(item){
				if(item.be_status==1){
					uni.$emit('coupon',item)
					uni.navigateBack({
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		box-shadow: 0px 0px 8px rgba(255, 153, 0, 0.21);
	}
	.list-top{
		position: relative;
	}
	.list-top::before{
		position: absolute;
		content: "";
		width: 54rpx;
		height: 54rpx;
		background: #fff;
		border-radius: 50%;
		box-shadow: 0px 0px 8px rgba(255, 153, 0, 0.21);
		bottom: -27rpx;
		left: -27rpx;
	}
	.list-top::after{
		position: absolute;
		content: "";
		width: 54rpx;
		height: 54rpx;
		background: #fff;
		border-radius: 50%;
		box-shadow: 0px 0px 8px rgba(255, 153, 0, 0.21);
		bottom: -27rpx;
		right: -27rpx;
	}
	.list-bottom{
		position: relative;
	}
	.list-bottom::before{
		position: absolute;
		content: "";
		width: 40rpx;
		height: 70rpx;
		background: #fff;
		top: -35rpx;
		left: -40rpx;
	}
	.list-bottom::after{
		position: absolute;
		content: "";
		width: 40rpx;
		height: 70rpx;
		background: #fff;
		top: -35rpx;
		right: -40rpx;
	}
	.list1{
		background: #f8f8f8;
	}
	.list-top1{
		position: relative;
	}
	.list-top1::before{
		position: absolute;
		content: "";
		width: 54rpx;
		height: 54rpx;
		background: #fff;
		border-radius: 50%;
		bottom: -27rpx;
		left: -27rpx;
	}
	.list-top1::after{
		position: absolute;
		content: "";
		width: 54rpx;
		height: 54rpx;
		background: #fff;
		border-radius: 50%;
		bottom: -27rpx;
		right: -27rpx;
	}
</style>
